<template>
	<el-card>
		<div style="font-weight:bold;margin-bottom:10px;">AGV利用率</div>
		<div ref="chartRef" style="height:200px;width:100%;"></div>
	</el-card>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({ data: Object })
const chartRef = ref()
let chart

const renderChart = () => {
	if (!chart) chart = echarts.init(chartRef.value)
	chart.setOption({
		tooltip: {
			trigger: 'item',
			formatter: '{b}: {c} ({d}%)'
		},
		series: [
			{
				name: 'AGV利用率',
				type: 'pie',
				radius: ['65%', '85%'],
				avoidLabelOverlap: false,
				label: {
					show: true,
					position: 'center',
					formatter: () => `繁忙\n${props.data.busy}%`,
					fontSize: 18,
					fontWeight: 'bold'
				},
				emphasis: {
					label: { show: true, fontSize: 20, fontWeight: 'bold' }
				},
				labelLine: { show: false },
				data: [
					{ value: props.data.busy, name: '繁忙', itemStyle: { color: '#409EFF' } },
					{ value: props.data.idle, name: '空闲', itemStyle: { color: '#ccc' } }
				]
			}
		]
	})
}

onMounted(() => {
	setTimeout(renderChart, 10) // 避免容器未撑开导致渲染失败
})
watch(() => props.data, renderChart)
</script>
  
